<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地区-文件导出</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    body {
      padding-left: 40px;
    }

    .radio-group {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <h2>省市区街道-几级自由导出到文件格式</h2>
  <div id="app">
    <el-cascader :options="options" change-on-select @change='cascaderChange' :value='cascaderVal'></el-cascader>
    <div class="radio-group">
      <h4>导出文件格式:</h4>
      <el-radio-group v-model="radio" @change='radioChange'>
        <el-radio label="txt">txt</el-radio>
        <el-radio label="json">json</el-radio>
        <el-radio label="js">js</el-radio>
      </el-radio-group>
    </div>
    <el-row style="margin-top:20px;">
      <el-button type="primary" @click='exportToFile'>导出</el-button>
    </el-row>
  </div>
  <script src="./dist/FileSaver.js"></script>
  <script src="./new_area_data.js"></script>
  <!-- <script src="./area_format.js"></script> -->
  <script>
    console.log(areaData);
    new Vue({
      el: '#app',
      data: function () {
        return {
          options: [{
            value: '省',
            label: '省',
            children: [{
              value: '市',
              label: '市',
              children: [{
                value: '区',
                label: '区',
                children: [{
                  value: '街道',
                  label: '街道'
                }]
              }]
            }]
          }],
          props: {
            value: 'value',
            label: 'label',
            children: 'children'
          },
          cascaderVal: ['省', '市', '区'],
          radio: 'txt'
        }
      },
      methods: {
        cascaderChange(arr) {
          this.cascaderVal = arr;
        },
        radioChange(val) {
          this.radio = val;
        },
        exportToFile() {
          var data = JSON.parse(JSON.stringify(areaData));
          var len = this.cascaderVal.length;
          // 文件名
          var fileName = '';
          var arr = this.cascaderVal;
          for (var i in arr) {
            fileName += arr[i];
          }
          fileName += '-' + new Date().getTime() + '.' + this.radio;
          if (len === 1) {
            for (var i in data) {
              delete data[i].childs
            }
          } else if (len === 2) {
            for (var i in data) {
              for (var o in data[i].childs) {
                delete data[i].childs[o].childs
              }
            }
          } else if (len === 3) {
            for (var i in data) {
              for (var o in data[i].childs) {
                for (var n in data[i].childs[o].childs) {
                  delete data[i].childs[o].childs[n].childs
                }
              }
            }
          }
          this.downloadTextFile(JSON.stringify(data), fileName)
          this.$message({
            message: '导出成功!',
            type: 'success'
          });
        },
        downloadTextFile(area, fileName) {
          // var blob = new Blob(["欢迎访问 hangge.com"], {type: "text/plain;charset=utf-8"});
          // saveAs(blob, "文件导出测试.txt");
          var file = new File([area], fileName, {
            type: "text/plain;charset=utf-8"
          });
          saveAs(file);
        }
      }
    })
  </script>
</body>

</html>